<!-- 单选: <me-radio v-model="label" :list="list"></me-radio> -->
<template>
	<view class="me-radio">
		<view class="radio" :class="{active:val.label==value, disabled: disabled||val.disabled}" v-for="val in list" :key="val.label" @click.stop="doClick(val)">{{val.value}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			value: [String, Number, Boolean], // 当前选中的字段
			list: { // 选项组: [{"label":11, "value":"名称", disabled: false}]
				type: Array,
				default(){
					return []
				}
			},
			disabled: Boolean // 是否禁用
		},
		methods: {
			// 点击事件
			doClick(val){
				if(!this.disabled && !val.disabled) {
					if(this.value!=val.label){
						this.$emit('input', val.label)
						this.$emit('change', val.label)
					}
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss">
	.me-radio{
		padding: 10px 0;
		.radio{
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin-right: 60px;
			padding: 4px 10px;
			border: 1px solid #999;
			color: #999;
			cursor: pointer;
			&.active{
				border: 1px solid $uni-color-primary;
				color: $uni-color-primary;
			}
			&.disabled{
				opacity: 0.5;
			}
		}
	}
</style>
